<template>
  <div>
    <a-modal :visible="visible" title="库存详情" :footer="false" @before-open="open" @ok.stop="handleOk" @cancel="handleCancel" top="50px" :align-center="false" title-align="start" width="1200px" :mask-closable="false">
      <a-tabs v-model:active-key="currentPage" type="card">
        <a-tab-pane key="Mapped" title="FAB在途仓">
          <Mapped v-if="visible" :id="onWayInventoryId" ref="mapped" />
        </a-tab-pane>
        <a-tab-pane key="OnWay" title="FBA映射仓">
          <OnWay v-if="visible" :id="mappedInventoryId" ref="onway" />
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, nextTick, watch } from 'vue'
  import Mapped from './mapped.vue'
  import OnWay from './onWay.vue'
  import { updateLocationRemarkBatch } from '@/api/warehouse'
  import { Message } from '@arco-design/web-vue'
  export default defineComponent({
    props: ['onWayInventoryId', 'mappedInventoryId'],
    components: { Mapped, OnWay },
    setup(props: any, { emit }) {
      let visible = ref(false)
      const mapped = ref()
      const onway = ref()
      const data: any = reactive({
        currentPage: 'Mapped',
        id: '',
      })

      const open = () => {
        nextTick(() => {
          mapped.value.open()
          onway.value.open()
        })
      }
      const handleOk = () => {}
      const handleCancel = () => {
        visible.value = false
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        mapped,
        onway,
      }
    },
  })
</script>

<style lang="less" scoped></style>
